字體設(shè)計(jì)規(guī)范文檔（適用于網(wǎng)站建設(shè)）
一、文檔目的
本規(guī)范旨在為網(wǎng)站設(shè)計(jì)、前端開發(fā)、內(nèi)容編輯等相關(guān)人員提供一致、清晰、專業(yè)的字體使用標(biāo)準(zhǔn)，確保網(wǎng)站在不同設(shè)備、語言環(huán)境下具備良好的可讀性與品牌統(tǒng)一性。
二、基礎(chǔ)字體設(shè)置
1. 主字體（Primary Font）
字體名稱：Roboto
字體類型：無襯線字體（Sans-serif）
用途：全站正文、段落、按鈕、導(dǎo)航等主要內(nèi)容區(qū)域
2. 輔助字體（Secondary Font）
字體名稱：Playfair Display
字體類型：襯線字體（Serif）
用途：首頁主標(biāo)題、品牌口號(hào)、引用語、強(qiáng)調(diào)文本
3. 備用字體棧（Fallback）
font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
三、字號(hào)與層級(jí)規(guī)范
| 層級(jí) | 標(biāo)簽 | 字號(hào)(px) | 字重 | 行高 | 用途 |
|---|---|---|---|---|---|
| H1 | h1 | 32px | 700 | 1.3 | 頁面主標(biāo)題 |
| H2 | h2 | 28px | 600 | 1.4 | 模塊標(biāo)題 |
| H3 | h3 | 22px | 600 | 1.4 | 子模塊/小標(biāo)題 |
| 正文 | p | 16px | 400 | 1.6 | 正文段落 |
| 輔助說明 | span.small | 14px | 400 | 1.5 | 二級(jí)說明、小字說明 |
| 按鈕文字 | button | 16px | 500 | 1.5 | CTA、操作按鈕 |
四、字體顏色規(guī)范
| 類別 | 顏色代碼 | 用途 |
| 主文本色 | #333333 | 正文、導(dǎo)航欄等主要文字 |
| 標(biāo)題色 | #111111 | 各層級(jí)標(biāo)題、品牌口號(hào) |
| 輔助色 | #666666 | 說明、提示、腳注等內(nèi)容 |
| 鏈接色 | #1A73E8 | 可點(diǎn)擊的鏈接文本 |
| 鏈接懸停色 | #0049B7 | 鼠標(biāo)懸停交互反饋 |
五、響應(yīng)式字體規(guī)則
為適配不同屏幕設(shè)備，建議使用 CSS 的 clamp() 函數(shù)設(shè)置字體大小。
示例：
h1 {
font-size: clamp(24px, 5vw, 32px);
}
?? 說明：此語法表示字體大小在 24px 到 32px 之間，根據(jù)視口寬度自動(dòng)縮放。
六、字體使用規(guī)范
全站最多使用兩種字體，避免風(fēng)格混亂。
字重使用
400（常規(guī)）、500（中等）、700（加粗），不建議頻繁使用900。禁止使用全部大寫（ALL CAPS）作為段落正文，除非用于品牌標(biāo)志。
所有圖像中的文字內(nèi)容，應(yīng)與網(wǎng)頁所使用字體一致。
使用
font-display: swap;以防止文字閃白。
七、Web 字體加載建議
推薦使用 Google Fonts 提供的壓縮字體鏈接；如有性能要求，可下載字體文件進(jìn)行本地托管。
字體格式建議支持：
woff2優(yōu)先，其次為woff
示例代碼：
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
八、多語言適配建議
| 語言 | 推薦字體 | 用途說明 |
| 中文 | 思源黑體 / 微軟雅黑 | 保證跨平臺(tái)兼容性與視覺一致性 |
| 日文 | Noto Sans JP | 與Roboto風(fēng)格相似，適合日語內(nèi)容 |
| 阿拉伯語 | Cairo / Noto Kufi Arabic | 保持與主視覺統(tǒng)一 |
| 韓文 | Noto Sans KR | 與Roboto兼容良好 |
九、異常處理與兼容性測(cè)試
使用字體加載監(jiān)控工具（如FontFaceObserver）提升字體加載控制
所有字體應(yīng)在主流瀏覽器（Chrome, Safari, Firefox, Edge）上測(cè)試顯示兼容性
對(duì)于不支持Web字體的設(shè)備，應(yīng)降級(jí)為系統(tǒng)字體棧
十、附錄：設(shè)計(jì)工具內(nèi)置字體對(duì)應(yīng)建議
| 設(shè)計(jì)工具 | 字體名稱 | 與開發(fā)字體一致性 |
| Figma | Roboto | ? 開發(fā)一致 |
| Adobe XD | Roboto / Lato | ? 推薦使用 |
| Sketch | Helvetica Neue | ? 可兼容 fallback 棧 |
本規(guī)范文件可用于交付前的前端走查、UI審核、品牌標(biāo)準(zhǔn)落地檢查。